import * as THREE from "three";
import { CSS2DObject } from "three/examples/jsm/renderers/CSS2DRenderer.js";

// 棱柱组对象
const prismGroup = new THREE.Group();
prismGroup.position.y += 0.1;
prismGroup.name = '棱柱组对象';

let color1 = new THREE.Color('#1E90FF');
let color2 = new THREE.Color('#4169E1');
let prismGlowArr = [];

// 创建棱柱
function createPrismn (cityData, waterObj) {
    prismGlowArr = [];
    cityData.map(item => {
        const h = ((waterObj[item.name] - '') / 3000).toFixed(1);
        const max = 40;
        const H = 5 + (max - 5) * Math.random();
        const percent = (H - 5) / max;
        const cylinderGeometry = new THREE.CylinderGeometry(0.5, 0.5, h, 6);
        const color = color1.clone().lerp(color2.clone(), percent);
        const material = new THREE.MeshBasicMaterial({
            color: color,
            // shading: THREE.SmoothShading
        })
        const mesh = new THREE.Mesh(cylinderGeometry, material);
        mesh.position.set(item.x, h / 2, -item.y);
        mesh.name = '棱柱';
        prismGlowArr.push(mesh);
        // 创建棱柱上方数值对象
        const dom = document.getElementById('prismValue').cloneNode();
        dom.innerHTML = ((waterObj[item.name] - '') / 100).toFixed(0) + '万';
        const css2DObject = new CSS2DObject(dom);
        css2DObject.position.set(0, (h / 2) + 2, 0);
        mesh.add(css2DObject);
        prismGroup.add(mesh);
    })
}

export { prismGroup, createPrismn, prismGlowArr };
